<template>
  <div class="addSubject">
    <el-dialog :title="title" :visible.sync="addShow" width="600px">
      <el-form ref="form" label-width="80px" :rules="rules" :model="form">
        <el-form-item label="学科编码" prop="rid">
          <el-input v-model.trim="form.rid" />
        </el-form-item>
        <el-form-item label="学科名称" prop="name">
          <el-input v-model="form.name" style="width='300px'" />
        </el-form-item>
        <el-form-item label="学科简称">
          <el-input v-model="form.short_name" />
        </el-form-item>
        <el-form-item label="学科简介">
          <el-input v-model="form.intro" />
        </el-form-item>
        <el-form-item label="学科备注">
          <el-input v-model="form.remark" />
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button>取消</el-button>
        <el-button type="primary" @click="addEvent">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { subjectAddAPI } from '@/api/subject.js'
export default {
  components: {},
  props: {
    initlist: {
      type: Array,
      requried: true
    }
  },
  data() {
    return {
      mode: 'add', // add || edit
      addShow: false,
      form: {
        id: '',
        rid: '', // "学科编号"
        name: '', // "学科名称"
        short_name: '', // 学科简称
        intro: '', // 学科简介
        status: '', // 状态
        remark: '' // 备注
      },
      rules: {
        rid: [{ required: true, message: '请输入学科编码', trigger: 'change' }],
        // {
        //   validator: (rule, value, callback) => {
        //     const bol = false
        //     if (this.mode === 'add') {
        //       bol = this.initlist.every((item) => {
        //         return item.code !== value
        //       })
        //     } else if (this.mode === 'edit') {
        //       // 排除当前项
        //       const arr = this.initlist.filter((item) => {
        //         return item.id !== this.form.id
        //       })
        //       // 判断重复项
        //       bol = arr.every((item) => {
        //         return item.code !== value
        //       })
        //     }
        //     bol ? callback() : callback(new Error('部门编码重复+value'))
        //   }
        // }

        name: [{ required: true, message: '请输入学科名称', trigger: 'change' }]
      }
    }
  },
  computed: {
    // 头部标题
    title() {
      if (this.mode === 'add') {
        return '新增学科'
      } else {
        return '编辑学科'
      }
    }
  },
  methods: {
    // 确认提交
    addEvent() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          console.log(this.form)
          const res = await subjectAddAPI(this.form)
          this.$message.success('添加成功')
          console.log('学科添加', res)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.addSubject {
  //标题颜色
  ::v-deep .el-dialog__title {
    color: #fff;
    padding: 30px 20px 20px;
  }
  // 弹框头部颜色
  ::v-deep .el-dialog__header {
    padding: 20px;
    background: linear-gradient(90deg, #01c4fa, #1294fa);
    text-align: center;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  //   弹框头部X按钮
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  //   确认取消按钮
  .btn {
    text-align: center;
    margin-top: 50px;
  }
}
</style>
